<template>
  <div style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;" class="permission">
    <div>
      <el-input placeholder="请输入搜索内容" style="width: 20%" class="user" v-model="queryForm.keyword"></el-input>
      <el-button type="primary" class="search" style="padding: 6px 16px;" @click="getAllRole">查 询</el-button>
    </div>
    <el-button type="primary" class="buttonAdd button_add_zl" @click="addPermission">
    	<i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增
    </el-button>
    <wh-table :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option">
      <template slot-scope="props" slot="operate">
        <div >
        	<span class="caozuo_span">
          	<a @click="editPermission(props.rowData)">编辑</a>
        	</span>
        	<span class="caozuo_span">
          	<a @click="deleteRole(props.rowData)" >删除</a>
        	</span>
        </div>
      </template>
    </wh-table>
    <edit-permission :dataDetail="dataDetail" :type="operateType"></edit-permission>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import { formatDate } from '@/utils/formatDate'
  import editPermission from './editPermission';
  export default {
    name:'permission',
    components: {whTable,editPermission},
    data(){
      return{
        tableData: [],
        tableHeader:[],
        tableLoading:true,
        dataDetail:{},
        operateType:"",
        option:{showOperate:false, headerCell: {background: 'rgb(214, 215, 216)', color: 'rgba(0, 0, 0, 0.8)'}},
        queryForm:{keyword:""}
      }
    },
    mounted(){
      let self = this;
      self.$eventBus.$on("updatePermission",function () {
        self.getAllRole();
      });
      self.getAllRole();
    },
    methods:{
      getAllRole(){
        let self = this;
        self.tableLoading = true;
        self.queryForm.keyword = self.queryForm.keyword.trim();
        self.$http({
          url: "/autoMonitor/permission/queryAllRole",
          method: "post",
          params:self.queryForm
        }).then(resp => {
          if (resp.success) {
            self.tableLoading = false;
            self.tableHeader =  [{"columnName": "roleName", "coloumNameCn": "角色名称"},
              {"columnName": "roleTypeCn", "coloumNameCn": "角色类型"},
              {"columnName": "rolePermission", "coloumNameCn": "角色权限"},
              {"columnName": "createTimeStr", "coloumNameCn": "创建时间"}];
            for(let data of resp.result){
              data.createTimeStr = formatDate(new Date(data.createTime),"yyyy-MM-dd hh:mm:ss");
              data.roleTypeCn = data.roleType == 1?"超级管理员":"普通角色";
            }
            self.tableData = resp.result;
            self.option.showOperate = true;
          }
        });
      },
      editPermission(rowData){
        let self = this;
        self.operateType = 'edit';
        self.dataDetail = Object.assign({},rowData);
      },

      addPermission(){
        this.dataDetail = {
          id:"",
          roleType:"1",
          rolePermission:"",
          roleName:""
        };
        this.operateType = 'add';
      },

      deleteRole(rowData){
        let self = this;
        let param = {id:rowData.id};
        self.$confirm('确定删除该角色信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/permission/deleteRole",
            method: "post",
            params: param,
          }).then(resp => {
            if (resp.success) {
              self.getAllRole();
              self.$notify({
                title: '提示',
                message: "删除成功！",
                type: 'info'
              });
              return
            }
            self.$notify({
              title: '提示',
              message: "操作失败，请联系管理员！",
              type: 'error'
            });
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      }
    }
  }
</script>
<style scoped>
  .permission .el-date-editor.el-input, .permission .el-date-editor.el-input__inner {
    width: auto;
  }
  .permission .search.el-button--medium {
    padding: 5px 9px !important;
    background: #34bfc6;
    border-color: #34bfc6;    
    margin-left: 10px;
  }
  .permission .buttonAdd{
    margin-top: 15px;
    font-size: 12px;
    border-radius: 13px;
  }
</style>
